

	<!-- 可变效果区 -->
	<div class="main ">

		<div class="row">
			<div class="col-lg-12">
				<h3 class="page-header"><i class="fa fa-indent"></i>添加管理员</h3>

			</div>
		</div>

		<div class="row">
		    <div class="col-md-6">
		        <div class="panel panel-default">
		            <div class="panel-heading">
		                <h2><i class="fa fa-indent red"></i><strong>审核</strong></h2>
		            </div>
					<div class="panel-body">
						<form action="index.php?c=admin&a=add&admin=1" method="post" enctype="multipart/form-data" class="form-horizontal ">

                            <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">用户名</label>
			                    <div class="col-md-4 unp">
			                        <input type="text" id="text-input" name="username" class="usn form-control" placeholder="请输入帐号"><span class="text-danger"></span>
			                    </div>
			                </div>
					        <div class="form-group">
					            <label class="col-md-4 control-label" for="text-input">密码</label>
					            <div class="col-md-4">
					                <input type="password" id="text-input" name="password" class="pwd form-control" placeholder="请输入密码"><span></span>
					                <div style="display: none; padding-top: 5px; text-align: center; background-color:#FF0000; width: 50px; height: 8px; float:left; border: solid 2px #ccc; border-radius: 10px;">弱</div>
					                <div style="display: none; padding-top: 5px; text-align: center; background-color:#E3D415; width: 50px; height: 8px; float:left; border: solid 2px #ccc; border-radius: 10px;">中</div>
					                <div style="display: none; padding-top: 5px; text-align: center; background-color:#79c447; width: 50px; height: 8px; float:left; border: solid 2px #ccc; border-radius: 10px;">强</div>
					            </div>
					        </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">确认密码</label>
			                    <div class="col-md-4">
			                        <input type="password" id="text-input" name="cpassword" class="repwd form-control" placeholder="请确认密码"><span></span>

			                    </div>
			                </div>



			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">姓名</label>
			                    <div class="col-md-4">
			                        <input type="text" id="text-input" name="name" class="form-control" placeholder="请输入姓名">

			                    </div>
			                </div>



			                <div class="form-group">
			                    <label class="col-md-4 control-label">性别</label>
			                    <div class="col-md-4">
			                        <label class="radio-inline" for="inline-radio1">
			                        	<input type="radio" id="inline-radio1" name="sex" value="1">男
			                        </label>
			                        <label class="radio-inline" for="inline-radio2">
			                        	<input type="radio" id="inline-radio2" name="sex" value="0">女
			                        </label>

			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">年龄</label>
			                    <div class="col-md-4">
			                        <input type="text" id="text-input" name="age" class="form-control" placeholder="年/月/日">

			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">手机号码</label>
			                    <div class="col-md-4">
			                        <input type="text" id="text-input" name="tel" class="tel form-control" placeholder="手机号码或固定电话"><span></span>

			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">邮箱</label>
			                    <div class="col-md-4">
			                        <input type="text" id="text-input" name="email" class="mail form-control" placeholder="请输入地址"><span></span>

			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="text-input">地址</label>
			                    <div class="col-md-4">
			                        <input type="text" id="text-input" name="address" class="form-control" placeholder="请输入地址">

			                    </div>
			                </div>
			                <div class="form-group">
			                    <label for="select" class="col-md-4 control-label">角色</label>
			                    <div class="col-md-4 sublevel">
			                        <select name="role_id" size="1" class="form-control" id="select">
			                            <option value="0">请选择管理员职位</option>
			                            <?php foreach($role as $v){?>
			                            <option value="<?php echo $v['id']?>"><?php echo $v['name']?></option>
			                            <?php }?>
			                        </select>
			                    </div>
			                </div>
			                <div class="form-group">
			                    <label class="col-md-4 control-label" for="file-multiple-input">上传照片</label>
			                    <div class="col-md-4">
			                        <input type="file" id="file-multiple-input" name="file-multiple-input" multiple>
			                    </div>
			                </div>

							<br>

					</div>
					<div class="panel-footer">
	                    <button type="submit" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i>提交</button>
                        <button type="reset" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i>重置</button>
	                </div>
	                </form>
		        </div>
		    </div>


		</div><!--/.row-->

	</div>
	<!-- end: Content -->
	<br><br><br>

<script src="resources/admin/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		var ok = false;
		var ok1 = false;

		var ok4 = false;
		var ok5 = false;

        // 用户名校验
		$('.usn').blur(function(event) {
			var str = $(this).val();
			var reg = /\w{4,20}/;
			var result = reg.exec(str);
			if(str.length<4 || str.length>20){
				$(this).next().html('用户名长度必须在4~20位之间').removeClass().addClass('text-danger');
				return false;
			}

			var reg = /[^a-z0-9A-Z_]+/;
			var result1 = reg.exec(str);


			if(result1!=null){
				$(this).next().html('请输入由字母、数字和_组成的用户名').removeClass().addClass('text-danger');
				return false;
			}
			if(result!='' && result!=null){
			   $(this).next().html('√').removeClass().addClass('text-success');
               ok = true;
		    }
		});

		// 密码校验
		$('.pwd').keyup(function(){
			var str = $(this).val();
			var reg = /[\w!`@#$%^&*()_+-=\/,\.\?]{6,20}/;
			var result = reg.exec(str);

			if(str.length>=1 && str.length<6){
                $(this).next().html('密码长度必须在6~20位之间').addClass('text-danger');
                $(this).nextAll('div:eq(0)').show();
                $(this).nextAll('div:eq(1)').hide();
               	return false;
            }else if(str.length==0){
            	$(this).next().remove();
            	$(this).nextAll('div').hide();
            }

			if(str.length>=6 && str.length<9){
			    $(this).next().html('√').removeClass().addClass('text-success');
			    ok1 = true;
                $(this).nextAll('div:eq(1)').show();
                $(this).nextAll('div:eq(2)').hide();
               	return false;
            }

			if(str.length>=9 && str.length<=20){
				$(this).next().html('√').removeClass().addClass('text-success');


                $(this).nextAll('div:eq(2)').show();
                return false;
            }

            if(str.length>20){
            	$(this).next().html('密码长度必须在20位以内').addClass('text-danger');
            }

		})

		// 确认密码
		$('.repwd').blur(function(){
			if($('.pwd').val()=='√'){
			    var pwd = $('.pwd').val();
				var repwd = $('.repwd').val();
				if(repwd!=pwd){
					$(this).next().html('两次密码不一致').removeClass().addClass('text-danger');
				}else{
					$(this).next().html('√').removeClass().addClass('text-success');

				}

				if(repwd.length==0){
	                $(this).next().remove();
			    }
			}

		})

        // 手机号码校验
        $('.tel').blur(function(){
        	var str = $(this).val();
			var reg = /^1[3578]\d{9}/;
			var result = reg.exec(str);
			if(str.length!=11){
				$(this).next().html('号码长度必须是11位').removeClass().addClass('text-danger');
				return false;
			}

			if(result==null){
				$(this).next().html('请输入正确手机号').removeClass().addClass('text-danger');
				return false;
			}else{
			   $(this).next().html('√').removeClass().addClass('text-success');
			   ok4 = true;

		    }
        })

        // 邮箱验证
        $('.mail').blur(function(){
        	var str = $(this).val();
			var reg = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
			var result = reg.exec(str);

            if(result==null){
            	$(this).next().html('邮箱格式不对，请输入正确邮箱').removeClass().addClass('text-danger');
            	return false;
            }else{
			   $(this).next().html('√').removeClass().addClass('text-success');
			   ok5 = true;
		    }

        })


        $('.btn-success').click(function(){


            if((ok&&ok1 &&ok4&&ok5 )==false){
                 alert('请输入正确的格式');
                 return false;
            }
        	// $('.form-horizontal').each(function() {
        	// 	alert($(this).text());
        	// 	if($(this).text()!='√'){
        	// 		return false;
        	// 	}
        	// });

        })

	})
</script>